<gm:page title="Places" authenticate="false">
  
<script type="text/javascript">
     function switchMap() {
        var map = google.mashups.getObjectById("map").getMap();
        map.setMapType(map.getMapTypes()[2]); // Hybrid view is the third type supported by the Maps API
      }

  </script>   <table width="100%" >
     <tr>
       <td width="25%"  height="30" valign="top">
         <gm:list id="list" template="photoList" height="90%" data="http://picasaweb.google.com/data/feed/base/user/mita.n.shah/albumid/5004307198561180049?kind=photo&alt=atom&authkey=NtaZ0_97HX8&hl=en_US">
           <gm:handleEvent src="map" event="select"/>
         </gm:list>
       </td>
      <td width="50%" >
         <gm:map id="map" data="${list}">
           <gm:handleEvent src="list" event="select"/>           
           <gm:handleEvent event="select" execute="onMapSelect(event.entry)"/>          
         </gm:map>
       </td>
       <td width="25%">
         <gm:item template="photo">
           <gm:handleEvent src="list" event="select"/>
         </gm:item>
       </td>
     </tr>
  </table>
<script type="text/javascript">
  function onMapSelect(entry) {
    if (entry) {
       var latLng = new GPath("georss:where/gml:Point/gml:pos").getValue(entry); // Get the entry's lat-long value
       if (latLng) {
         var map = google.mashups.getObjectById("map").getMap();
         map.setZoom(14); // Zoom in
         latLng = latLng.split(" "); // Split out the space-separated latitude and longitude values
         map.setCenter(new GLatLng(latLng[0], latLng[1])); // Re-center the map
       }
    } else {
       google.mashups.getObjectById("map").showAllMarkers(); // If no entry selected, zoom out
    }
  }
</script>

  <gm:template id="photoList">
     <div repeat="true" style="padding: 5px">
        <gm:image ref="media:group/media:thumbnail/@url" height="54" width="54" mode="fill" style="float: left"/>
        <gm:date ref="atom:published"/>
        <gm:text ref="atom:title"/>
        <br style="clear: both"/>

        
    </div>
  </gm:template>

  <gm:template id="photo">
    <gm:image ref="media:group/media:thumbnail[@width='288']/@url"/>
    </gm:template>
</gm:page>

